<script setup lang="ts">
import type { CSSProperties } from 'vue';

const headerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 164,
  paddingInline: 0,
  lineHeight: '164px',
  backgroundColor: '#7dbcea',
};

const contentStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};
const footerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#7dbcea',
};
</script>

<template>
  <a-layout>
    <a-layout-header :style="headerStyle"> Header </a-layout-header>
    <a-layout-content :style="contentStyle">Content</a-layout-content>
    <a-layout-footer :style="footerStyle">Footer</a-layout-footer>
  </a-layout>
</template>

<style scoped></style>
